<template>
  <div id="form-table">
    <el-row v-for="(row, rowIndex) in myTableList" :key="rowIndex" type="flex">
      <!-- 操作按钮 -->
      <el-button
        class="delete-button"
        type="danger"
        icon="el-icon-delete"
        size="mini"
        @click="myTableList.splice(rowIndex, 1)"
      ></el-button>

      <!-- 0=单栏行 || 1=双栏行 -->
      <template v-if="row.componentType == 0 || row.componentType == 1">
        <template v-for="(item, i) in row.element.column">
          <el-col :span="4" :key="i + '_label'">
            {{ item.label }}
          </el-col>
          <el-col :span="20" :key="i + '_value'" class="clear-border">
            <table-type
              v-model="item.defalutValue"
              :type="item.valueType"
              :options="item.options"
            />
          </el-col>
        </template>
      </template>

      <!-- 2=多列行 -->
      <template v-else-if="row.componentType == 2">
        <el-col :span="24">
          <el-table border :data="row.element.data">
            <el-table-column
              v-for="(column, i) in row.element.column"
              :key="i"
              :label="column.label"
            >
              <template slot-scope="{ row }">
                <table-type
                  v-model="row[column.prop].defalutValue"
                  :type="row[column.prop].valueType"
                  :options="row[column.prop].options"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </template>
      <template v-else> componentType 未匹配 </template>
    </el-row>
  </div>
</template>
<script>
import tableType from "./tableType";
export default {
  name: "formTable",
  components: {
    tableType,
  },
  props: ["data"],
  data() {
    return {
      activeIndex: null,
      myTableList: [],
    };
  },
  methods: {
    //添加一行
    addRow(row) {
      const data = JSON.parse(JSON.stringify(row));
      if (typeof data.element == "string") {
        data.element = JSON.parse(data.element);
      }
      //判断多列行 特殊处理
      if (data.componentType == 2) {
        data.element.data = [];
        for (let rowIndex = 0; rowIndex < data.rowsLimit; rowIndex++) {
          let row = {};
          data.element.column.forEach((colItem, colIndex) => {
            colItem.prop = colIndex;
            //判断是否第一行
            if (rowIndex == 0) {
              row[colIndex] = {
                valueType: colItem.valueType,
                options: JSON.parse(JSON.stringify(colItem.options)),
                defalutValue: JSON.parse(JSON.stringify(colItem.defalutValue)),
              };
            } else {
              row[colIndex] = {
                valueType: "text",
              };
            }
          });
          data.element.data.push(row);
        }
      }
      this.myTableList.push(data);
    },
    updatedData(data) {
      this.myTableList = data ? JSON.parse(JSON.stringify(data)) : [];
    },
    getData() {
      return this.myTableList;
    },
  },
  created() {
    this.updatedData(this.data);
  },
};
</script>
<style lang="scss">
#form-table {
  min-width: 600px;
  .el-row {
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    position: relative;
    .delete-button {
      position: absolute;
      display: none;
      z-index: 2;
      top: 0;
      right: 0;
    }
    .el-col {
      padding: 20px;
      border-left: 1px solid #000;
      border-top: 1px solid #000;
    }
  }
  .el-row:hover {
    background-color: #f5f7fa;
  }
  .el-row:hover .delete-button {
    display: block;
  }
}
</style>